<template>
  <div class="layout">
    <el-button type="primary" @click="getImg">获取轮播图</el-button>
    <el-button type="primary" @click="getNewImg"
      >获取轮播图(省略awit和async)</el-button
    >
  </div>
</template>

<script>
export default {
  data () {
    return {}
  },
  methods: {
    // 第一种写法
    async getImg () {
      console.log('获取图片点击事件触发了')
      // 携带参数
      // let result = await this.$apis.captchaImage({phone:'188888888',password:'111111'});.
      // 不携带参数
      let res = await this.$apis.captchaImage()
      console.log(res)
      if (res.meta.status == 200) {
        // 赋值操作
        this.$message.success('获取成功')
      } else {
        this.$message.error(res.meta.msg || '获取数据失败')
      }
    },
    // 第二种写法可以捕获错误catch((err)
    getNewImg () {
      this.$apis.captchaImage().then((res) => {
        console.log(res)
        if (res.meta.status == 200) {
          this.$message.success('获取成功！')
        } else {
          this.$message.error(res.meta.msg || '获取数据失败')
        }
      }).catch((err) => {
        console.log("查询错误", err)
      })
    }
  }
}

</script>

<style >
.layout {
  height: 100%; /*注意，这里设了这个高度后，后期给window注册onscorll事件时，注册不上*/
  overflow-x: hidden;
}
</style>
